<template>
  <div class="flow-tooltar">
    <a-select v-model:value="versions" style="width: 200px" :getPopupContainer="(triggerNode) => triggerNode.parentNode"
      @change="handleChange">
      <a-select-option v-for="(item, index) in options" :key="index" :value="item.value">
        <span>流程版本V{{ item.version }}</span>
        <span :class="'tip' + item.state" class="box-s">
          <a-tag :color="item.color">{{ item.label }}</a-tag>
        </span>
      </a-select-option>
    </a-select>
    <a-button ghost type="primary" @click="isJSON"> JSON </a-button>
    <a-button ghost type="primary" @click="isPreview"> 预览 </a-button>
    <a-button danger type="primary" @click="isRemove"> 删除 </a-button>
    <a-button type="primary" @click="isSave"> 保存 </a-button>
    <a-button type="primary" @click="isInvocation"> 启用 </a-button>
  </div>

  <a-modal v-model:visible="visible" title="预览" @ok="handleOk" width="90%">
    <FlowPreview></FlowPreview>
    <template #footer>
      <a-button type="primary" ghost>加签</a-button>
      <a-button type="primary" ghost>子流程</a-button>
      <a-button type="primary" ghost>转交</a-button>
      <a-button type="primary" ghost>退回</a-button>
      <a-button type="primary" ghost>暂存</a-button>
      <a-button style="border: 1px solid #e6a23c;color:#e6a23c;" @click="handleCancel">退签</a-button>
      <a-button type="primary">签收</a-button>
      <a-button type="primary">提交</a-button>
      <a-button type="primary">代办</a-button>
    </template>
  </a-modal>
  <a-modal v-model:visible="generateJsonVisible" title="JSON" :footer="null" :width="800">
    <CodeEditor :value="generateJsonTemplate" language="json" readonly />
  </a-modal>
</template>

<script setup>
import {
  defineComponent,
  ref,
  reactive,
  toRefs,
  defineProps,
  defineEmits,
  createVNode
} from "vue";
import { Modal } from "ant-design-vue";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import CodeEditor from "@/components/flowDesign/flowCommon/compoents/dialog/CodeEditor.vue";
import FlowPreview from "@/components/flowDesign/flowCommon/compoents/dialog/FlowPreview.vue";
const props = defineProps({
  flowData: {
    type: Object,
  },
});
const emit = defineEmits([
  "generateJson",
  "previewFlow",
  "saveFlow",
  "removeFlow",
  "invocationFlow",
  "aaa"
]);
/**
 * 按钮
 * */
// JSON
const generateJsonVisible = ref(false);
const generateJsonTemplate = ref();
const isJSON = () => {
  generateJsonVisible.value = true;
  generateJsonTemplate.value = JSON.stringify(props.flowData, null, 2);
};
// 预览
const visible = ref(false);
const isPreview = () => {
  visible.value = true;
  emit("previewFlow", props.flowData);
};
// 保存
const isSave = () => {
  console.log("保存", props.flowData);
};
/**
 * 弹窗
 */
const handleOk = (e) => {
  // console.log(e);
  isJsonVisible.value = false;
  visible.value = false;
};
const aaa = () => {
  emit("aaa")
}
aaa()
// 版本
const form = reactive({
  verId: null, //版本ID 启用中 > 设计中
  version: null, //版本号
  state: null, //状态
  len: null,
});
const versions = ref(["3"]);
const options = ref([
  {
    value: "3",
    version: "3",
    label: "开发中",
    color: "warning",
  },
  {
    value: "2",
    version: "2",
    label: "已开发",
    color: "success",
  },
  {
    value: "1",
    version: "1",
    label: "历史版本",
    color: "success",
  },
]);

const handleChange = (value) => {
  options.value.forEach(item => {
    if (item.value === value) {
      versions.value = item.version
    }
  })
};
// 删除
const isRemove = () => {
  Modal.confirm({
    icon: createVNode(ExclamationCircleOutlined),
    title: `确定删除流程版本(V${versions.value})？`,
    async onOk() { },
    onCancel() { },
  });
};
// 启用
const isInvocation = () => {
  Modal.confirm({
    icon: createVNode(ExclamationCircleOutlined),
    title: `确定启用流程版本(V${versions.value})？`,
    async onOk() {
    },
    onCancel() { },
  });
};

const filterOption = (input, option) => {
  return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
</script>
<style lang="less" scoped>
.flow-tooltar {
  padding-left: 10px;
  box-sizing: border-box;
  // border: 1px solid #e9e9e9;
  height: 52px;
  line-height: 52px;
  z-index: 3;
  float: right;
  padding-right: 40px;
  -webkit-box-shadow: 0 8px 12px 0 rgba(0, 52, 107, 0.04);
  box-shadow: 0 8px 12px 0 rgba(0, 52, 107, 0.04);

  .ant-btn {
    margin: 0 5px 0 5px;
  }
}

:deep(.ant-select-item-option-content) {
  display: flex;
  justify-content: space-between;
}

:deep(.ant-select-selection-item) {
  display: flex;
  justify-content: space-between;

  .box-s {
    height: 25px;
    position: relative;
    top: 3px;

    &>span {
      position: relative;
      top: -3px;
    }
  }

  span:nth-child(2) {
    margin-left: 10px;
  }

  .ant-select-item-option {
    .box-s {}
  }
}
</style>
